<template>
  <el-container>
    <el-main>
      <el-row style="height: 100vh" type="flex" justify="center" align="middle">
        <el-col :span="8">
          <el-form
            :model="userForm"
            :rules="rules"
            ref="userForm"
            label-width="100px"
          >
            <el-form-item label="账号：" prop="username">
              <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input
                type="password"
                v-model="userForm.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login('userForm')"
                >登录</el-button
              >
              <el-button @click="resetForm('userForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "长度在 6 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login(formName) {
      // $refs时vue的一个接口，时所有使用ref属性的vue组件的集合。
      // console.log(this.$refs[formName])  // el-form vue组件对象，
      this.$refs[formName].validate((value, obj) => {
        // console.log(value);
        // console.log(obj);
        if (value) {
          // this.$axios.post()
          this.$axios({
            method: "post",
            // url: this.url + "/user/login",
            url: "/user/login",
            data: this.userForm,
          })
            .then((res) => {
              // console.log(res);
              if (res.data.code === 0) {
                sessionStorage.isLogin = "1";
                // sessionStorage.token = res.data.token;
                sessionStorage.userInfo = JSON.stringify(res.data.data);
                // 修改vuex中状态的值：
                console.log(this.$store); // {dispatch, commit,}
                // this.$store.dispatch("loginAc", {
                //   isLogin: "1",
                //   token: res.data.token,
                //   userInfo: res.data.data,
                // });
                this.$store.dispatch("loginAc", true);
                this.$store.dispatch("tokenAc", res.data.token);
                this.$store.dispatch("userInfoAc", res.data.data);

                this.$router.push("/main");
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error",
                });
              }
            })
            .catch((resError) => {
              console.log(resError);
            });
        }
        // else {
        //   this.$message({
        //     type: "error",
        //     message: "输入的信息字符串构成验证失败",
        //   });
        // }
      });
    },
    resetForm(formName) {},
  },
};
</script>

<style>
</style>